<template>
  <table>
     <Empty v-for="(item,index) in goodsArr" 
     :key="index"
     :obj='item'
     :index='index'
     />
     <tr>All Number:{{ collect }}</tr>
  </table>
</template>

<script>
import Empty from './component/Empty.vue'
export default {
 data() {
  return {
   goodsArr: [
    {
        count: 0,
        goodsName: "Watermelon"
    }, {
        count: 0,
        goodsName: "Banana"
    }, {
        count: 0,
        goodsName: "Orange"
    }, {
        count: 0,
        goodsName: "Pineapple"
    }, {
        count: 0,
        goodsName: "Strawberry"
    }
],
   
  }
 },
 components:{
  Empty
 },
 computed:{
  collect() {
  return this.goodsArr.reduce((item,obj) => item += obj.count * 1,0)
  }
 }
}
</script>

<style>

</style>